<template>
<div>
        <a-steps  style="position:relative;top:-50px">
      <!-- <a-step v-for="item in steps" :key="item.title" :title="item.title" /> -->
      <a-step title="邮箱验证"></a-step>
      <a-step title="密码修改" style="position:relative;left:-170px"></a-step>
      <a-step title="修改成功" style="position:relative;left:-150px"></a-step>
    </a-steps>
    <div>
    <a-input placeholder="请输入注册email" size="large" style="width:500px" v-model="email">
 
    </a-input>
    <br>
    <br>
        <a-input-search placeholder="请输入新发邮件中的验证码" size="large" style="width:500px" v-model="code" @search="getcode">
      <a-button slot="enterButton" >
        {{text}}
      </a-button>
    </a-input-search>
</div>
<br>
<br>
<br>
<a-button type="primary" @click="toStep2">提交</a-button>
<a-button @click="toLogin">返回</a-button>
</div>

</template>

<script>
export default {
    data() {
        return { 
            email:'',
            code:'',
            text:'获取验证码'
        };
    },
    methods:{
        async getcode(){
            const {data:res} = await this.$http.get("http://localhost:8081/user/acquirecode",{params:{email:this.email}})
            if(res.code == 400){
                this.$message.error('该用户不存在，请重新输入')
                this.email = ''
            }
            else if(res.code == 300){
                this.$message.error('获取验证码失败')
            }
            else if(res.code == 200){
                this.$message.success('获取验证码成功')
                this.text='验证码已发送'
            }
            
        },
        async toStep2(){
            const {data:res} = await this.$http.get("http://localhost:8081/user/validatecode",{params:{email:this.email,code:this.code}})
            if(res.code == 300){
                this.$message.error('验证码错误,请重新输入')
            }
            else if(res.code == 200){
                this.$message.success('验证通过！')
                window.sessionStorage.setItem('email',this.email)
                this.$router.push('/Step2')
            }
            
        },
        toLogin(){
            this.$router.push('/login')
        }
    }
}
</script>
<style lang="less" scoped>
</style>